<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>
        layui在线调试
    </title>
    <link rel="stylesheet" href="../../layuiadmin/layui-v2.5.5/layui/css/layui.css" media="all" type="text/css">
    <style type="text/css">
        body{margin: 10px;}
        .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
        .input{height:35px;width:110px}
        .ss{
               position: absolute;
               left: 840px;
               top: 10px;
               z-index:111111;
           }
        .sw{
            position: absolute;
            left: 910px;
            top: 10px;
            z-index:111111;
        }
        .sc{
            position: absolute;
            left: 980px;
            top: 10px;
            z-index:111111;
        }
        .down-panel{
            padding: 0;
            z-index: 100;
            overflow:visible;
        }
        .down-panel .layui-select-title{
            padding-right:30px;
            padding-left:10px;
            overflow:visible;
        }
        .down-panel dl{
            color: #000;
            top: 30px;
            font-size: 14px;
        }
        .down-panel .layui-select-title i{
            border-top-color:#fff;
        }
        .down-panel:hover{
            opacity:1 !important;
            filter:alpha(opacity=100) !important;
            color:#fff
        }
        .layui-anim-upbit{
            top: 100% !important;
            z-index: 999999 !important;
        }
        .layui-anim-upbit dd {
            text-align: left;
        }
        .over-hover{
            overflow: visible; z-index: 9999;
        }
        .layui-select-title{
            background-color: #008FBF;
        }
        .layui-table-box{
            overflow: visible;!important;
        }
        .layui-table-body{
            overflow: visible;!important;
        }
    </style>
</head>
<body bgcolor="white">
<div class="layui-form" id="form">
    <div class="demoTable">
        <i class="layui-icon"></i>
        <div class="layui-inline">
            <input name="name" class="layui-input input" id="empName1" placeholder="请输入姓名" autocomplete="off">
        </div>
        <div class="layui-inline">
            <input name="name" class="layui-input input" id="empPhone" placeholder="手机号码" autocomplete="off">
        </div>
        <div class="layui-inline" style="width: 180px">
            <select style="width:0px;" name="empPosition" id="empPosition" lay-verify="required">
                <option value="">
                    选择身份
                </option>
            </select>
        </div>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="empEntryDate" name="empEntryDate" placeholder="入职时间" placeholder="yyyy-MM-dd" autocomplete="off">
        </div>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="empContEnddate" name="empContEnddate" placeholder="合同到期时间" placeholder="yyyy-MM-dd">
        </div>
            <div class="button1 ss">
                <button class=" layui-btn" data-type="reload">
                    <i class="layui-icon layui-icon-search" style="font-size: 15px; color: #F2F2F2;"></i>
                </button>
            </div>
        <table class="layui-hide" id="demo" lay-filter="test"></table><script type="text/html" id="barDemo">
        <div class="layui-btn-group layui-form">
            <button type="button" class="layui-btn layui-btn-xs layui-unselect layui-form-select down-panel">
                <div class="layui-select-title" onmouseover="downPanel(this)">
                    其他操作
                    <i class="layui-edge"></i>
                </div>
                <dl class="layui-anim layui-anim-upbit">
                    <dd>
                        <i class="layui-icon"></i>
                        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看详细资料</a>
                    </dd>
                    <dd>
                        <i class="layui-icon"></i>
                        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="workhistory">查看工作经历</a>
                    </dd>
                    <dd>
                        <i class="layui-icon"></i>
                        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="degree">查看教育经历</a>
                    </dd>
                </dl>

            </button>
        </div>
    </script>
        </div>
    <script src="../../layuiadmin/layui-v2.5.5/layui/layui.js" type="text/javascript">
    </script> <script type="text/javascript" src="../../layuiadmin/lib/jquery.min.js">
    </script> <script type="text/javascript">
    function downPanel(that) {
        var nodes = layui.jquery(".layui-form-selected");
        var hoverNodes = layui.jquery(".over-hover");
        var current = layui.jquery(that).parent();
        if (current.hasClass("layui-form-selected")) {
            nodes.removeClass("layui-form-selected");
            hoverNodes.removeClass("over-hover");
        } else {
            if (nodes.length > 0) {
                nodes.removeClass("layui-form-selected");
                hoverNodes.removeClass("over-hover");
            }
            current.addClass("layui-form-selected");
            current.parent(".layui-form").parent().addClass("over-hover");
        }
        layui.jquery(document).click(function(event){
            var _con2 = layui.jquery(".down-panel");
            if(!_con2.is(event.target) && (_con2.has(event.target).length ===0)){
                _con2.removeClass("layui-form-selected");
                hoverNodes.removeClass("over-hover");
                nodes.removeClass("layui-form-selected");
            }
        });
    }
            var parentData = "";
        //格式转换
        function createrFormat(o){
            return o;
        }
        layui.config({
            version: '1554901097999' //为了更新 js 缓存，可忽略
        });
        layui.use(['form','jquery','laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider','layedit',], function(){
            $=layui.jquery;
            var laypage = layui.laypage //分页
                ,layer = layui.layer //弹层
                ,form = layui.form
                ,layedit=layui.layedit
                ,table = layui.table //表格
                ,carousel = layui.carousel //轮播
                ,element = layui.element //元素操作
                ,slider = layui.slider //滑块
                ,laydate = layui.laydate
            //执行一个 table 实例
            table.render({
                elem: '#demo'
                ,url: 'http://localhost:8080/HrEmp/listALl' //数据接口
                ,title: '用户表'
                ,width:1290
                ,limit:5
                ,method:'post'
                ,page: true //开启分页
                ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                ,totalRow: false //开启合计行
                ,cols: [[ //表头
                    {type:'checkbox',width:100,title:'全选', fixed: 'left'}
                    ,{field:'empPosition', width:118, title: '身份'}
                    ,{field:'empName', width:140, title: '姓名', sort: true}
                    ,{field:'empPhone',title: '手机号码', width:140 }
                    ,{field:'empEntryDate',title:'入职时间',width:180 }
                    ,{field:'empContEnddate',title:'合同到期时间',width:180 }
                    ,{field:'empWorkstatus',title:'在职状态',width:100 }
                    ,{field:'empBirthdate', width:150, title: '出生日期', sort: true}
                    ,{title:'操作',fixed: 'right', width: 170, align:'center', toolbar: '#barDemo'}
                ]],
                id:"listData"
            });
            // laydate.render({
            //     elem: '#empEntryDate'
            // });
            // laydate.render({
            //     elem: '#empContEnddate'
            // });
                    laydate.render({	elem: '#empEntryDate',	format: 'yyyy-MM-dd',	done: function (value, date, endDate) {		var startDate = new Date(value).getTime();		var endTime = new Date($('#empContEnddate').val()).getTime();		if (endTime < startDate) {			layer.msg('结束时间不能小于开始时间');			$('#empEntryDate').val($('#empContEnddate').val());		}	}	})
                       laydate.render({elem: '#empContEnddate',	format: 'yyyy-MM-dd',	done: function (value, date, endDate) {		var startDate = new Date($('#empEntryDate').val()).getTime();		var endTime = new Date(value).getTime();		if (endTime < startDate) {			layer.msg('结束时间不能小于开始时间');			$('#empContEnddate').val($('#empEntryDate').val());		}	}})
            function getParentData(){
                // parentData 这是一个全局变量，当你点击按钮时给他付了值，子页面调用这个函数就能拿到这个值
                // 这只是返回一个字段，你可以返回一个对象
//                 	var parent ={}
//                 	parent.id = "1"
//                 		parent.name  = "10086"
//                 			parent.type = "10010"
//                 				parent.level = "1008611"

                return parentData;
            }

            $(function(){
                //
                var $browsers = $("input[name=sex]");
                var $cancel = $("#sex");
                var $byhide = $("#byhide");
                var $remove = $("#remove");
                //
                $byhide.click(function(e){
                    // 切换到一个隐藏域,两种方式均可
                    //$("#hidebrowser").attr("checked",true);
                    $("#hidebrowser").attr("checked","checked");
                });
            });
            $('#parentIframe').on('click', function(){
                index=layer.open({
                    type: 2,
                    title: '添加人员资料',
                    maxmin: true,
                    shadeClose: true, //点击遮罩关闭层
                    area : ['800px' , '520px'],
                    content: 'hrempadd.html'
                });
                layer.full(index);
            });
            //身份
            $(function(){
                $.ajax({
                    type:"POST",
                     url:"http://localhost:8080/HrEmp/position",
                    datatype: "json",//“xml”, “html”, “script”, “json”, “jsonp”, “text”.
                    success:function(data){
                        $.each(data,function(index,item){
                            $('#empPosition').append("<option value="+item.hrPositionName+">"+item.hrPositionName+"<\/option>");
                        });
                        layui.form.render("select");
                    },error:function(){
                        alert("失败")
                    }
                });
            })

            //监听头工具栏事件
            table.on('toolbar(test)', function(obj){

                var checkStatus = table.checkStatus(obj.config.id)
                    ,data = checkStatus.data; //获取选中的数据
                var data = checkStatus.data;
                var empState=0;
                var str=[];
                if(data.length>0){
                    for(var i=0;i<data.length;i++){
                        str.push(data[i].empId);
                    }
                }
                var arr=str.join(",");
                switch(obj.event){
                    case 'add':
                        index=layer.open({
                            type: 2,
                            title: '添加人员资料',
                            maxmin: true,
                            shadeClose: true, //点击遮罩关闭层
                            area : ['800px' , '520px'],
                            content: 'hrempadd.html',
                        });
                        layer.full(index);
                        break;
                    case 'update':
                        if(data.length === 0){
                            layer.msg('请选择一行');
                        } else if(data.length > 1){
                            layer.msg('只能同时编辑一个');
                        } else {
                            window.PartitionId=data;
                            index=layer.open({
                                type: 2,
                                title: '修改人员资料',
                                maxmin: true,
                                shadeClose: true, //点击遮罩关闭层
                                area : ['800px' , '520px'],
                                content: 'hrempupdate.html',
                            });
                            layer.full(index);
                        }
                        break;
                    case 'delete':
                        if(data.length === 0){
                            layer.msg('请选择一行');
                        } else {
                            layer.msg('删除');
                            $.ajax({
                                type:"POST",
                                url:"http://localhost:8080/HrEmp/del",
                                datatype:"json",
                                data:{
                                    empId:arr,
                                },
                                async:true,
                                success:function(data){
                                    layui.table.reload('listData');
                                },error:function(){
                                    alert("失败")
                                }
                            })
                        }
                        break;
                };
            });

            //监听行工具事件
            table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                    ,layEvent = obj.event; //获得 lay-event 对应的值
                parentData =data;
                if(layEvent === 'detail'){
                    window.PartitionId=data;
                    index=layer.open({
                        type: 2,
                        title: '查看',
                        maxmin: true,
                        skin: 'layui-layer-lan',
                        shadeClose: true, //点击遮罩关闭层
                        content: 'hremplist_list.html',
                    });
                    layer.full(index);
                }else if(layEvent=='workhistory'){
                    window.PartitionId=data;
                    index=layer.open({
                        type: 2,
                        title: '查看工作经历',
                        height:'100%',
                        width:'100%',
                        maxmin: true,
                        skin: 'layui-layer-lan',
                        shadeClose: true, //点击遮罩关闭层
                        area : ['1000px' , '600px'],
                        content: 'hrworkhistory.html',
                    });
                    layer.full(index);
                }else if(layEvent=='degree'){
                    window.PartitionId=data;
                                        index=layer.open({
                                            type: 2,
                                            title: '查看教育经历',
                                            maxmin: true,
                                            skin: 'layui-layer-lan',
                                            shadeClose: true, //点击遮罩关闭层
                                            area : ['1000px' , '600px'],
                                            content: 'hrdegree.html',
                                        });
                                        layer.full(index);
                }
            });
            //分页
            laypage.render({
                elem: 'pageDemo' //分页容器的id
                ,count: 100 //总页数
                ,limit:5
                ,skin: '#1E9FFF' //自定义选中色值
                //,skip: true //开启跳页
                ,jump: function(obj, first){
                    if(!first){
                        layer.msg('第'+ obj.curr +'页', {offset: 'b'});
                    }
                }
            });
            var $ = layui.$, active = {
                reload: function(){
                    //            var demoReload = $('#demoReload');
                    //            var department = $('#department');
                    //
                    //执行重载
                    table.reload('listData', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        ,where: {
                            empName:$('#empName1').val(),
                            empPhone:$('#empPhone').val(),
                            empPosition:$('#empPosition').val(),
                            empEntryDate:$('#empEntryDate').val(),
                            empContEnddate:$('#empContEnddate').val(),
                        }
                    });
                }
            };
            $(document).on("click",".layui-table-body table.layui-table tbody tr", function () {
                var index = $(this).attr('data-index');
                var tableBox = $(this).parents('.layui-table-box');
                //存在固定列
                if (tableBox.find(".layui-table-fixed.layui-table-fixed-l").length>0) {
                    tableDiv = tableBox.find(".layui-table-fixed.layui-table-fixed-l");
                } else {
                    tableDiv = tableBox.find(".layui-table-body.layui-table-main");
                }
                var checkCell = tableDiv.find("tr[data-index=" + index + "]").find("td div.laytable-cell-checkbox div.layui-form-checkbox I");
                if (checkCell.length>0) {
                    checkCell.click();
                }
            });

            $(document).on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) {
                e.stopPropagation();
            });

            $('.demoTable .layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });
    </script>
    </div>
</div>
</body>
</html>